<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/articleDetail.css" th:href="@{/css/articleDetail.css}">
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>文章页面</title>
</head>
<body>
<div class="article-container">


    <div class="article-content">
        <h1 th:text="${posts.title}">2025华为手机“别盲目买”，这4款几乎“零差评”，最低仅1289元</h1>
        <div class="article-meta">
            <span class="article-date" th:text="${posts.createdAt}">2025-03-22 21:47</span>
            <span class="article-author" th:text="${user.username}">·科技派大星</span>
        </div>
        <img th:src="${posts.imageUrl}" alt="">

        <p th:text="${posts.content}">
        </p>
    </div>
    <div class="right-column">
        <div class="author-card">
            <h2 class="card-title">关于作者</h2>
            <div class="author-info">
                <img th:src="${user.avatar}" alt="作者头像" class="author-avatar">
                <div class="author-name-container">
                    <span class="author-name" th:text="${user.username}"></span>
                    <span class="author-badge">🏆</span>
                </div>
            </div>
            <div class="author-stats">
                <div class="stat-item">
                    <span class="stat-label">想法</span>
                    <span class="stat-value" th:text="${thoughtNum}"></span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">文章</span>
                    <span class="stat-value" th:text="${postsNum}"></span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">关注者</span>
                    <span class="stat-value" th:text="${user.subscription}"></span>
                </div>
            </div>
        </div>
        <div class="interaction-container">
            <div class="like-section" th:data-value="${posts.id}" >
                <div class="like-icon-container icon-container">
                    <i class="iconfont like-icon" style=" color: rgb(82, 91, 100,1);">&#xe610;</i>
                </div>
                <div class="count-container">
                    <span class="count like-count" th:text="${posts.likeCount}"></span>
                </div>
            </div>
            <div class="comment-section1" th:data-value="${posts.id}" onclick="articleDetail(this.dataset.value)">
                <div class="icon-container">
                    <i class="iconfont comment-icon">&#xe6ad;</i>
                </div>
                <div class="count-container">
                    <span class="count comment-count" th:text="${posts.commentCount}"></span>
                </div>
            </div>

            <div class="share-section">
                <div class="icon-container">
                    <i class="iconfont share-icon">&#xe60e;</i>
                </div>
                <div class="text-container">
                    <span class="text">分享</span>
                </div>
            </div>
            <div class="share-outer">
                <div class="share-detail">
                    <i class="iconfont">&#xe618;</i>
                    <span>复制链接</span>
                </div>
            </div>
        </div>
        <button id="backBtn" class="back-button">
            <i class="iconfont">&#xe61b;</i>
            <span>返回上一页</span>
        </button>
    </div>
    <div class="comment-section">
        <div class="header-outer">
            <div  class="comment-header-outer">
                <div class="comment-header">
                    <span class="total-comments" >全部评论  <span th:text="${posts.commentCount}"></span> </span>
                    <i class="iconfont close">&#xe616;</i>
                </div>
            </div>
        </div>
        <div class="comment-item-outer"></div>
        <div class="comment-input-outer">
            <div class="comment-input">
                <input type="text" placeholder="留下你的精彩评论吧"  class="comment-input-detail">
                <div class="input-icons" th:data-value="${posts.id}" onclick="publish(this.dataset.value)">
                    <i class="iconfont">&#xe642; </i>
                    <span class="emoji-icon" > 发布</span>

                </div>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    let isLiked =[[${isLiked}]] ;
    let like_icon = document.getElementsByClassName('like-icon')[0]
    if(isLiked){

        like_icon.style.color = 'rgba(255,0,0,1)'
    }
</script>
</body>
<script src="../static/js/articleDetail.js" th:src="@{/js/articleDetail.js}"></script>
</html>